<template>
    <div>
        <mt-tabbar v-model="selected" fixed>
            <mt-tab-item id="/home" >
                <img slot="icon" src="../../../public/img/home.png" v-if="selected!=='/home'">
                <img slot="icon" src="../../../public/img/homeActive.png" v-if="selected==='/home'">
                首页
            </mt-tab-item>
            <mt-tab-item id="/movie" >
                <img slot="icon" src="../../../public/img/movie.png" v-if="selected!=='/movie'">
                <img slot="icon" src="../../../public/img/movieActive.png" v-if="selected==='/movie'">
                影院
            </mt-tab-item>
            <mt-tab-item id="/my" >
                <img slot="icon" src="../../../public/img/my.png" v-if="selected!=='/my'">
                <img slot="icon" src="../../../public/img/myActive.png" v-if="selected==='/my'">
                我的
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                selected: sessionStorage.getItem('selected') ? JSON.parse(sessionStorage.getItem('selected')) : '/home'
            }
        },
        watch: {
            selected (val, oldVal) {
                // 标签栏变化，把selected的值存到sessionStorage，
                sessionStorage.setItem('selected', JSON.stringify(val))
                this.$router.replace(val)
            },
            // 监听路由变化，保证从其他非主页路由切换过来时，selected也跟着变
            '$route.path': function (newVal, oldVal) {
                if (newVal === '/home' || newVal === '/movie' || newVal === '/my') {
                    this.selected = newVal
                }
            }
        }



    }
</script>

<style>

</style>